<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美的网页</title>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
        }

        .mainway {
            display: flex;
        }

        .way {
            margin: auto;
            width: 80px;
            height: 40px;
            text-align: center;
            font-size: 12px;
            cursor: pointer;
            line-height: 45px;
        }

        .way2 {
            cursor: pointer;
            margin: auto;
            width: 220px;
            height: 40px;
            font-size: 20px;
            line-height: 45px;
            color: white;
            margin: 30px;
            margin-left: 0px;
        }

        .way:hover {
            text-decoration: underline;
            color: aqua;
        }

        .way2:hover {
            text-decoration: underline;

        }

        .box1 {
            background-image: url(image/美的.webp);
            background-size: cover;
        }

        .box2 {
            background-image: url(image/搜索.png);
            background-size: cover;
            width: 40px;
            height: 40px;
        }

        select {
            padding-right: 10px;
            width: 40px;
            height: 30px;
            background-image: url(image/中国.webp);
            background-position: center;
            background-size: cover;
        }

        .container {
            background-color: rgb(5, 62, 62);
            margin: auto;
            opacity: 0.8;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            height: 600px;
            width: 100%;

        }

        option {
            display: block;
        }

        .task {
            display: none;
            position: absolute;

        }

        #task {

            position: absolute;
        }

        #task3 {
            /* display: grid; */
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-column-gap: 140px;
            grid-row-gap: 100px;

        }

        #task5 {
            /* display: flex; */
        }

        .img-box {
            background-image: url(image/商品2.webp);
            background-size: cover;
            width: 140px;
            height: 140px;
        }

        .img-box2 {
            background-image: url(image/商品3.webp);
            background-size: cover;
            width: 140px;
            height: 140px;
        }

        .img-box3 {
            background-image: url(image/商品4.webp);
            background-size: cover;
            width: 140px;
            height: 140px;
        }

        .img-box4 {
            background-image: url(image/商品6.webp);
            background-size: cover;
            width: 140px;
            height: 140px;
        }

        .img-box5 {
            background-image: url(image/商品7.webp);
            background-size: cover;
            width: 140px;
            height: 140px;
        }

        .img-box6 {
            background-image: url(image/商品8.webp);
            background-size: cover;
            width: 140px;
            height: 140px;
        }

        .img-box7 {
            background-image: url(image/商品9.webp);
            background-size: cover;
            width: 140px;
            height: 140px;
        }

        .img-box8 {
            background-image: url(image/商品10.webp);
            background-size: cover;
            width: 140px;
            height: 140px;
        }

        .img-box9 {
            background-image: url(image/美居.webp);
            background-size: cover;
            width: 850px;
            height: 500px;
        }

        .img-box10 {
            opacity: 1;
            background-image: url(image/服务.jpg);
            background-size: cover;
            width: 420px;
            height: 250px;
        }

        .img-box11 {
            background-image: url(image/服务2.webp);
            opacity: 1;
            background-size: cover;
            width: 420px;
            height: 250px;

        }

        .img-box12 {
            background-image: url(image/卖身契.webp);
            opacity: 1;
            background-size: cover;
            width: 850px;
            height: 470px;

        }
    </style>
</head>

<body>
    <ul class="mainway">
        <div class="way box1"></div>
        <div class="way" id="way">美的业务</div>
        <div class="way" id="way2">投资者关系</div>
        <div class="way" id="way3">美的商城</div>
        <div class="way" id="way4">美的美居</div>
        <div class="way" id="way5">美的服务</div>
        <div class="way" id="way6">加入美的</div>
        <div class="way" id="way7">关于美的</div>
        <div class="way" id="way8">美的供应商</div>
        <div class="way box2"></div>
        <div class="way"><select name="" id="selections">

            </select></div>
    </ul>
    <div class="container">
        <ul id="task">
            <div class="way2">总览</div>
            <div class="way2">智能家居事业群</div>
            <div class="way2">机电事业群</div>
            <div class="way2">暖通与楼宇事业部</div>
            <div class="way2">机器人与自动化事业部</div>
            <div class="way2">数字化创新业务</div>
        </ul>
        <ul id="task2" class="task">
            <div class="way2">知道投资者没有你和我就行了</div>

        </ul>
        <ul id="task3" class="task">
            <div class="way2 img-box"></div>
            <div class="way2 img-box2"></div>
            <div class="way2 img-box3"></div>
            <div class="way2 img-box4"></div>
            <div class="way2 img-box5"></div>
            <div class="way2 img-box6"></div>
            <div class="way2 img-box7"></div>
            <div class="way2 img-box8"></div>

        </ul>
        <ul id="task4" class="task">
            <div class="way2 img-box9"></div>

        </ul>
        <ul id="task5" class="task">
            <div class="way2 ">我只是放2个spa技师而已没别的意思</div>
            <div class="way2 img-box10"></div>
            <div class="way2 img-box11"></div>

        </ul>
        <ul id="task6" class="task">
            <div class="way2 ">007福报</div>
            <div class="way2 img-box12"></div>


        </ul>
        <ul id="task7" class="task">
            <div class="way2">我不知道所以不写</div>

        </ul>
        <ul id="task8" class="task">
            <div class="way2">有你吗？反正没有我</div>

        </ul>
    </div>
    <script>

        var i = 0
        selections.onclick = function () {
            if (i == 0) {
                i++
                selections.style.backgroundImage = "url(image/丹麦.webp)"
            } else if (i == 1) {
                i++
                selections.style.backgroundImage = "url(image/美国.webp)"
            }
            else if (i == 2) {
                i++
                selections.style.backgroundImage = "url(image/日本.webp)"
            }
            else if (i == 3) {
                i = 0
                selections.style.backgroundImage = "url(image/中国.webp)"
            }
        }
        way.onclick = function () {
            task.style.display = "block"
            task2.style.display = "none"
            task3.style.display = "none"
            task4.style.display = "none"
            task5.style.display = "none"
            task6.style.display = "none"
            task7.style.display = "none"
            task8.style.display = "none"
            way.style.textDecoration = "underline"
            way2.style.textDecoration = "none"
            way3.style.textDecoration = "none"
            way4.style.textDecoration = "none"
            way5.style.textDecoration = "none"
            way6.style.textDecoration = "none"
            way7.style.textDecoration = "none"
            way8.style.textDecoration = "none"
            way.style.color = "aqua"
            way2.style.color = "black"
            way3.style.color = "black"
            way4.style.color = "black"
            way5.style.color = "black"
            way6.style.color = "black"
            way7.style.color = "black"
            way8.style.color = "black"
            
        }
        way2.onclick = function () {
            task.style.display = "none"
            task2.style.display = "block"
            task3.style.display = "none"
            task4.style.display = "none"
            task5.style.display = "none"
            task6.style.display = "none"
            task7.style.display = "none"
            task8.style.display = "none"
            way.style.textDecoration = "none"
            way2.style.textDecoration = "underline"
            way3.style.textDecoration = "none"
            way4.style.textDecoration = "none"
            way5.style.textDecoration = "none"
            way6.style.textDecoration = "none"
            way7.style.textDecoration = "none"
            way8.style.textDecoration = "none"
            way.style.color = "black"
            way2.style.color = "aqua"
            way3.style.color = "black"
            way4.style.color = "black"
            way5.style.color = "black"
            way6.style.color = "black"
            way7.style.color = "black"
            way8.style.color = "black"
        }
        way3.onclick = function () {
            task.style.display = "none"
            task2.style.display = "none"
            task3.style.display = "grid"
            task4.style.display = "none"
            task5.style.display = "none"
            task6.style.display = "none"
            task7.style.display = "none"
            task8.style.display = "none"
            way.style.textDecoration = "none"
            way2.style.textDecoration = "none"
            way3.style.textDecoration = "underline"
         
            way4.style.textDecoration = "none"
            way5.style.textDecoration = "none"
            way6.style.textDecoration = "none"
            way7.style.textDecoration = "none"
            way8.style.textDecoration = "none"
            way.style.color = "black"
            way2.style.color = "black"
            way3.style.color = "aqua"
            way4.style.color = "black"
            way5.style.color = "black"
            way6.style.color = "black"
            way7.style.color = "black"
            way8.style.color = "black"
        }
        way4.onclick = function () {
            task.style.display = "none"
            task2.style.display = "none"
            task3.style.display = "none"
            task4.style.display = "block"
            way4.style.textDecoration = "underline"
            way4.style.color = "aqua"
            task5.style.display = "none"
            task6.style.display = "none"
            task7.style.display = "none"
            task8.style.display = "none"
            way.style.textDecoration = "none"
            way2.style.textDecoration = "none"
            way3.style.textDecoration = "none"
            way4.style.color = "aqua"
            way4.style.textDecoration = "underline"
            way5.style.textDecoration = "none"
            way6.style.textDecoration = "none"
            way7.style.textDecoration = "none"
            way8.style.textDecoration = "none"
            way.style.color = "black"
            way2.style.color = "black"
            way3.style.color = "black"
            way4.style.color = "aqua"
            way5.style.color = "black"
            way6.style.color = "black"
            way7.style.color = "black"
            way8.style.color = "black"
        }
        way5.onclick = function () {
            task.style.display = "none"
            task2.style.display = "none"
            task3.style.display = "none"
            task4.style.display = "none"
            task5.style.display = "flex"
            task6.style.display = "none"
            task7.style.display = "none"
            task8.style.display = "none"
            way.style.textDecoration = "none"
            way2.style.textDecoration = "none"
            way3.style.textDecoration = "none"
            way4.style.textDecoration = "none"
            way5.style.textDecoration = "underline"
            way6.style.textDecoration = "none"
            way7.style.textDecoration = "none"
            way8.style.textDecoration = "none"
            way.style.color = "black"
            way2.style.color = "black"
            way3.style.color = "black"
            way4.style.color = "black"
            way5.style.color = "aqua"
            way6.style.color = "black"
            way7.style.color = "black"
            way8.style.color = "black"
        }
        way6.onclick = function () {
            task.style.display = "none"
            task2.style.display = "none"
            task3.style.display = "none"
            task4.style.display = "none"
            task5.style.display = "none"
            task6.style.display = "block"
            task7.style.display = "none"
            task8.style.display = "none"
            way.style.textDecoration = "none"
            way2.style.textDecoration = "none"
            way3.style.textDecoration = "none"
            way4.style.textDecoration = "none"
            way5.style.textDecoration = "none"
            way6.style.textDecoration = "underline"
            way7.style.textDecoration = "none"
            way8.style.textDecoration = "none"
            way.style.color = "black"
            way2.style.color = "black"
            way3.style.color = "black"
            way4.style.color = "black"
            way5.style.color = "black"
            way6.style.color = "aqua"
            way7.style.color = "black"
            way8.style.color = "black"
        }
        way7.onclick = function () {
            task.style.display = "none"
            task2.style.display = "none"
            task3.style.display = "none"
            task4.style.display = "none"
            task5.style.display = "none"
            task6.style.display = "none"
            task7.style.display = "block"
            task8.style.display = "none"
            way.style.textDecoration = "none"
            way2.style.textDecoration = "none"
            way3.style.textDecoration = "none"
            way4.style.textDecoration = "none"
            way5.style.textDecoration = "none"
            way6.style.textDecoration = "none"       
            way7.style.textDecoration = "underline"
            way8.style.textDecoration = "none"
            way.style.color = "black"
            way2.style.color = "black"
            way3.style.color = "black"
            way4.style.color = "black"
            way5.style.color = "black"
            way6.style.color = "black"
            way7.style.color = "aqua"
            way8.style.color = "black"


        }
        way8.onclick = function () {
            task.style.display = "none"
            task2.style.display = "none"
            task3.style.display = "none"
            task4.style.display = "none"
            task5.style.display = "none"
            task6.style.display = "none"
            task7.style.display = "none"
            task8.style.display = "block"
            way.style.textDecoration = "none"
            way2.style.textDecoration = "none"
            way3.style.textDecoration = "none"
            way4.style.textDecoration = "none"
            way5.style.textDecoration = "none"
            way6.style.textDecoration = "none"
            way7.style.textDecoration = "none"
            way8.style.textDecoration = "underline"
            way.style.color = "black"
            way2.style.color = "black"
            way3.style.color = "black"
            way4.style.color = "black"
            way5.style.color = "black"
            way6.style.color = "black"
            way7.style.color = "black"
            way8.style.color = "aqua"
        }
    </script>
</body>

</html>